import { useEffect, useState } from "react";
import styles from "./index.module.less";
import { Flex, Modal, Switch, message, Select } from "antd";
import { TABLE_COLUMNS } from "./constant";
import SuperTable from "@/components/SuperTable";
import { RESULT_CODES } from "@/api/helper/ResultCode";
import { useRequest } from "ahooks";
import { deleteTestUser, getTestStatus, getTestUserList, updateTestStatus, updateTestUserStatus } from "@/api/modules/setting";
import { MindType } from "../../../enums/index";

export default () => {
	const [status, setStatus] = useState(-1);
	const [auditValue, setAuditValue] = useState("");
	const [params, setParams] = useState({});
	const { loading: getStatusLoading, runAsync: getStatusRunAsync, data } = useRequest(getTestStatus);
	const { loading: updateStatusLoading, runAsync: updateStatusRunAsync } = useRequest(updateTestStatus, { manual: true });

	useEffect(() => {
		if (data?.code === 1) {
			setStatus(data?.data?.is_all_open);
			setAuditValue(data?.data?.auditValue);
		}
	}, [data]);

	const handleOpenChange = (checked: boolean) => {
		updateStatusRunAsync({ is_all_open: checked ? 1 : -1, auditValue }).then(() => getStatusRunAsync());
		// console.log(checked);
	};

	const handleRequest = async (params: any) => {
		const res = await getTestUserList({});
		return {
			total: res?.total ?? 0,
			data: res?.data ?? []
		};
	};

	const handleSaveCode = (value: any) => {
		console.log(value, "<===========value");
		updateStatusRunAsync({ is_all_open: status, auditValue: value }).then(() => getStatusRunAsync());
	};

	const newColumns = [
		...TABLE_COLUMNS,
		{
			title: "操作",
			width: 220,
			fixed: "right",
			dataIndex: "action-render",
			onClick: (key: string, record: any) => {
				switch (key) {
					case "delete":
						Modal.confirm({
							icon: null,
							title: "确认删除该内容？",
							content: "内容删除后将无法恢复，请慎重考虑",
							closable: true,
							onOk: c => {
								deleteTestUser({
									id: record?.id
								}).then((res: any) => {
									if (res?.code === RESULT_CODES.SUCCESS) {
										message.success("删除成功");
										setParams(e => ({
											...e,
											timeStamp: Date.now()
										}));
										c?.();
									}
								});
							}
						});
						break;
					case "check":
						const handleChange = (status, c) => {
							updateTestUserStatus({
								id: record?.id,
								accept_status: status
							}).then((res: any) => {
								if (res?.code === RESULT_CODES.SUCCESS) {
									c?.();
									message.success("操作成功");
									setParams(e => ({
										...e,
										timeStamp: Date.now()
									}));
								}
							});
						};
						Modal.confirm({
							icon: null,
							title: "审核提示",
							content: "操作后不可撤销，谨慎操作",
							closable: true,
							okText: "通过",
							cancelText: "不通过",
							onCancel: c => {
								handleChange(-1, c);
							},
							onOk: c => {
								handleChange(1, c);
							}
						});
						break;
				}
			},
			options: (record: any) => {
				return [{ label: "删除", value: "delete" }, ...(record?.accept_status === 0 ? [{ label: "审核", value: "check" }] : [])];
			}
		}
	];

	const isOpen = status === 1;

	return (
		<div className={styles.container}>
			<Flex justify="space-between" align="center" className={styles.header}>
				<div>
					<div className={styles.header_title}>正念入口码</div>
					<div className={styles.header_msg}>影响正念功能使用，谨慎修改</div>
				</div>
				<Select
					placeholder="请选择入口码"
					className={styles.input}
					onChange={handleSaveCode}
					value={auditValue}
					options={[
						{ value: MindType.code_1, label: "审核码-1" },
						{ value: MindType.code_2, label: "审核码-2" }
					]}
				/>
			</Flex>
			<Flex justify="space-between" align="center" className={styles.header}>
				<div>
					<div className={styles.header_title}>内测模式</div>
					<div className={styles.header_msg}>是否开启内测模式，如果打开，小程序将只允许内测用户使用</div>
				</div>
				<Switch loading={getStatusLoading || updateStatusLoading} checked={isOpen} onChange={handleOpenChange} />
			</Flex>
			{isOpen && (
				<>
					<div className={styles.table_title}>内测用户列表</div>
					<SuperTable params={params} columns={newColumns} request={handleRequest} scroll={{ x: "900" }} />
				</>
			)}
		</div>
	);
};
